<template>
  <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%">
    <!-- 准备一个有宽高的dom ———— 其他内容从父组件传过来 -->
    <div :id="uid" :style="style"></div>
  </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
  dataSource: {
    type: Object,
    default: null,
    required: true
  },
  canvasWidth: {
    type: String,
    default: '',
    required: true
  },
  canvasHeight: {
    type: String,
    default: '',
    required: true
  }
})
watch(() => props.dataSource, (newOption) => {
  // myChart.setOption(newOption, true); // 第二个参数true表示不合并，完全替换
  init();
}, { deep: true });

const uid = ref('')
const myChart = ref(null)
// 时间戳+随机字符
uid.value = new Date().getTime() + Math.random().toString(32).slice(2, 10)
console.log('uid:', uid.value)

let style = computed(() => ({
  width: props.canvasWidth,
  height: props.canvasHeight
}))
console.log('style:', style.value)

const init = () => {
  // 基于准备好的dom，初始化echarts实例
  myChart.value = echarts.init(document.getElementById(uid.value))
  // 绘制图表
  myChart.value.setOption(props.dataSource)
}
defineExpose({
  init
})
const updateWindowHeight = () => {
  location.reload()
  console.log('已刷新')
}
onMounted(() => {
  window.addEventListener('resize', updateWindowHeight)
  // nextTick(() => {
  //     init()
  // })
  init()
})
</script>
<style scoped></style>
